<template>
  <div class="cont-wrapper nva_menu_container">
    <div class="menu_container wst">
      <Sidebar v-if="list.length"  name="智能编排" :activeItem="activeItem" :siderList="list" @handleAcitve="handleAcitve"></Sidebar>
    </div>
    <div class="block-container container" v-loading="loading">
      <p class="title">智能编排学校</p>
      <div v-if="haveData">
        <div class="operation">
          <a href="javascript:;" class="save" @click="reArrange">重新编排</a>
          <a href="javascript:;" class="save" @click="dialogVisible = true">删除编排</a>
          <a :href='GLOBAL.COMMON+ "/organize/export/organizationData/byPointId?pointId="+ activeItem' class="save">打印编排表</a>
          <a href="javascript:;" class="save" @click="submitOrganize">上报编排</a>
        </div>
        <div v-for="(item,idex) in kaodian" :key="idex" class="exam-container" v-if="item.batchData.length">
          <div class="exam-info">
            <p>
              <span>考点：{{school}}</span>
              <span>考试日期：{{item.date}}</span>
              <span>总计：{{item.examineeInfo}}</span>
              <a href="javascrit:;" v-if="item.show" @click="item.show = false">收起</a>
              <a href="javascrit:;" v-else @click="item.show = true">展开</a>
            </p>
          </div>
          <table v-if="item.show" class="table" border="1" cellspacing="0" cellpadding="0" borderColor="#e0e0e0">
            <thead>
              <tr>
                <td>批次</td>
                <td>候考时间</td>
                <td>考试时间</td>
                <td>考场号</td>
                <td>准考证号区间</td>
                <td>学校</td>
                <td>人数</td>
                <td>监考老师</td>
              </tr>
            </thead>
            <tbody  v-for="(k,i) in item.batchData" :key="i">
              <tr>
                <td :rowspan="k.roomData.length">{{k.batch}}</td>
                <td :rowspan="k.roomData.length">{{k.waitTime}}</td>
                <td :rowspan="k.roomData.length">{{k.examTime}}</td>
                <td>{{getAttr(k.roomData[0] ,'roomCode')}}</td>
                <td>{{getAttr(k.roomData[0] ,'admissionRange')}}</td>
                <td>{{getAttr(k.roomData[0] ,'schoolsName')}}</td>
                <td>{{getAttr(k.roomData[0] ,'examineeNum')}}</td>
                <td>{{getAttr(k.roomData[0] ,'staffInvigilate')}}</td>
              </tr>
              <tr v-for="(p,pi) in k.roomData.length-1" :key="pi">
                <td>{{getAttr(k.roomData[pi+1] ,'roomCode')}}</td>
                <td>{{getAttr(k.roomData[pi+1] ,'admissionRange')}}</td>
                <td>{{getAttr(k.roomData[pi+1] ,'schoolsName')}}</td>
                <td>{{getAttr(k.roomData[pi+1] ,'examineeNum')}}</td>
                <td>{{getAttr(k.roomData[pi+1] ,'staffInvigilate')}}</td>
              </tr>
            </tbody>
            <tbody v-show="!item.batchData.length">
              <tr>
                <td colspan="8">
                  暂无数据
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div v-else>
        <div class="operation">
          <a href="javascript:;" class="save" @click="autoMatically">智能编排</a>
        </div>
        <p class="message">暂无编排结果，请点击智能编排</p>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      center>
      <p class="tip">您确定需要删除自动编排吗？</p>
      <span class="fuzhu"></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkReset">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Sidebar from '@/components/navSidebar.vue'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      school: '镇海中学',
      list: [],
      activeItem: 0,
      areaId: '',
      kaodian: [],
      dialogVisible: false,
      loading: false,
      haveData: false
    }
  },
  computed: mapState({
    changeNotify: state => state.changeNotify
  }),
  methods: {
    handleAcitve (item) {
      console.log('item', item)
      this.school = item.name
      this.activeItem = item.id
      this.getResult()
    },
    async initData () {
      let res = await this.$http.getPoint()
      // let areaName = sessionStorage.getItem('area')
      if (res.code === 20000) {
        // let obj = res.data.child
        // this.list = []
        // for (let i = 0; i < obj.length; i++) {
        //   if (sessionStorage.getItem('countyName') === obj[i].areaName) {
        //     this.areaId = obj[i].id
        //   }
        //   if (obj[i].areaName === areaName) {
        //     for (let j = 0; j < obj[i].child.length; j++) {
        //       this.list.push({
        //         id: obj[i].child[j].id,
        //         name: obj[i].child[j].areaName
        //       })
        //     }
        //   }
        // }
        res.data.map(item => {
          this.list.push({
            id: item.id,
            name: item.areaName
          })
        })
        this.activeItem = this.list[0].id
        this.areaId = res.data[0].parent.id
        console.log('this.activeItem', this.activeItem)
        this.school = this.list[0].name
        this.getResult()
      }
    },
    // 获取编排列表
    async getResult () {
      this.loading = true
      let res = await this.$http.searchMatically({
        pointAreaId: this.activeItem
      })
      if(res.status === "20000") {
        for (let i = 0; i < res.data.length; i++) {
          res.data[i].show = true
          if (res.data[i].batchData.length) {
            this.haveData = true
          }
        }
        this.kaodian = res.data
      } else {
        this.$message.error(res.msg)
      }
      this.loading = false
    },
    // 自动编排
    async autoMatically () {
      this.loading = true
      let res = await this.$http.autoMatically({
        areaId: this.areaId
      })
      if (res.code === 20000) {
        this.$message.success('自动编排成功！')
        this.getResult()
      } else {
        this.$message.error(res.msg)
        this.loading = false
      }
    },
    // 重新编排
    async reArrange () {
      this.loading = true
      let res = await this.$http.againAutomatically({
        areaId: this.areaId
      })
      // console.log('res', res)
      if (res.code === 20000) {
        this.$message.success('重新编排成功！')
        this.getResult()
      } else {
        this.$message.error(res.msg)
        this.loading = false
      }
    },
    // 删除编排
    async checkReset () {
      this.loading = true
      let res = await this.$http.deleteByArea({
        areaId: this.areaId
      })
      if (res.code === 20000) {
        this.dialogVisible = false
        this.$message.success('删除成功！')
        this.getResult()
      } else {
        this.$message.error(res.msg)
        this.loading = false
      }
    },
    getAttr (obj, name) {
      return obj[name]
    },
    // 提交上报审核
    submitOrganize() {
      this.$http.getOrganize().then(res => {
        if (res.code === 20000) {
          this.$message.success('上报编排成功！')
          this.$store.commit('CHANGE_NOTIFY', !this.changeNotify)
        }else {
          this.$message.error(res.msg)
        }
      })
    }
  },
  mounted () {
    this.initData()
  },
  components: {
    Sidebar
  }
}
</script>

<style lang="stylus" scoped>
color = #4177ff
background = #f3f3f3
@import url('../../assets/styles/base.css');
  .print
    display inline-block
    width 94px
    height 32px
    background color
    color #fff
    text-decoration none
    text-align center
    line-height 32px
    border-radius 5px
  .exam-info
    width 100%
    height 48px
    line-height 48px
    background #3d68d5
    position: relative;
    top: 26px;
    p
      span
        margin-left 20px
        color #fff
        font-size 12px
        font-weight bold
      a
        float right
        margin-right 40px
        color #fff
        font-size 12px
        text-decoration none
  .table
    width 100%
    margin-top 25px
    text-align center
    td
      border 1px solid #e0e0e0
    thead
      tr
        background background
        td
          height 48px
          font-weight bold
          line-height 48px
          text-align center
    tbody
      &:nth-child(2n+1)
        tr
          background #f9faff
      tr
        td
          height 46px
          font-size 14px
          line-height 46px
          text-align center
          vertical-align middle
.message
    margin-top 200px
    text-align center
.exam-container
  margin-bottom 20px
</style>
